<template>
	<view>
		<view v-if="item.id">
			<!--轮播 -->
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="swiper">
				<swiper-item v-for="(v, i) in item.image" :key="i" @click="openPreviewImage(item.image, i)">
					<view class="swiper-item">
						<image :src="v" mode="aspectFill" class="swiper-image"></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 商品信息 -->
			<list-item :item="item" :isShowImage="false">
				<view slot="desc">
					{{ item.desc }}
				</view>
			</list-item>
			<!-- 商品评论 -->
			<view class="comment-list">
				<view class="comment-item" v-for="(v, i) in item.commentList" key="i">
					<view class="left">
						<image :src="v.avator" mode="" class="avator"></image>
					</view>
					<view class="right">
						<view class="right-top">
							<text class="title">{{ v.nickname }}</text>
							<text class="datetime">{{ v.datetime }}</text>
						</view>
						<view class="right-bottom">
							<rich-text :nodes="v.content"></rich-text>
						</view>
					</view>
				</view>
			</view>
			<!-- 弹框 sku -->


			<!-- 底部 -->
			<uni-goods-nav @buttonClick="open" />
			<uni-popup ref="popup" type="bottom" style="z-index: 999;">
				<view class="content">
					<view class="sky-item">
						<view class="sky-title">
							颜色选择：
						</view>
						<view class="sky-item-list">
							<button :type="sku.color === v.name ? 'primary': 'default'" @click="sku.color = v.name"
								v-for="(v, i) in item.sku.color" :key="i" size="mini"
								:disabled="!v.disabled">{{ v.name }}</button>
						</view>
					</view>
					<view class="sky-item">
						<view class="sky-title">
							尺寸选择：
						</view>
						<view class="sky-item-list">
							<button :type="sku.size === v.name ? 'primary': 'default'" @click="sku.size = v.name"
								v-for="(v, i) in item.sku.size" :key="i" size="mini"
								:disabled="!v.disabled">{{ v.name }}</button>
						</view>
					</view>
					<view class="sky-item">
						<view class="sky-title">
							数量选择：
						</view>
						<view class="sky-item-list">
							<uni-number-box :min="1" v-model="count" @change="changeValue" />
						</view>
					</view>
					<button type="primary" @click="handleAddCart" class="btn">加入购物车</button>
				</view>
			</uni-popup>
		</view>
		<view v-else>数据加载中...</view>

	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		methods: {
			...mapMutations('cart', ['addCart']),
			async getDetail() {
				// 请求详情数据
				const [error, resp] = await uni.request({
					url: 'http://localhost:3000/list/' + this.id,
				})
				this.item = resp.data
			},
			openPreviewImage(urls, current) {
				uni.previewImage({
					urls: urls,
					current: current
				})
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			handleAddCart() {
				// 验证数据
				if (!this.sku.color) {
					uni.showToast({
						title: '请选择商品颜色',
						icon: 'none'
					})
					return;
				}
				if (!this.sku.size) {
					uni.showToast({
						title: '请选择商品尺寸',
						icon: 'none'
					})
					return;
				}
				// 关闭弹窗
				this.close()
				// 加入购物车的数据
				const data = {
					image: this.item.image,
					id: this.item.id,
					title: this.item.title,
					desc: this.item.desc,
					// 数据引用问题
					sku: {
						...this.sku
					},
					price: this.item.price,
					count: this.count,
					state: false,
				}

				// 加入购物车
				this.addCart({
					...data
				})
			},
			changeValue(value) {
				this.count = value
			}

		},
		data() {
			return {
				id: "",
				item: {},
				sku: {
					color: '',
					size: ''
				},
				count: 1
			};
		},
		onLoad(options) {
			this.id = options.id;
			this.getDetail()
		}
	}
</script>

<style lang="scss" scoped>
	.comment-list {
		.comment-item {
			display: flex;

			.left {
				flex-shrink: 0;
				width: 60rpx;

				.avator {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.right {
				margin-left: 10rpx;

				.right-top {
					height: 60rpx;
					line-height: 60rpx;

					.title {}

					.datetime {}
				}

				.right-bottom {}
			}
		}
	}

	.swiper {
		height: 400rpx;


		.swiper-item {


			.swiper-image {
				width: 100vw;
				height: 400rpx;
			}
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.content {
		position: fixed;
		bottom: 0%;
		left: 0;
		width: 100%;
		background-color: white;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		min-height: 500rpx;
		padding-bottom: 100rpx;


		.sky-item {
			padding: 10px;
		}
	}
</style>